{% extends 'base.html' %}
{% load static %}

{% block content %}
<style>
    body {
        background: linear-gradient(to right, #f8f9fa, #e9ecef);
    }

    .card-header {
        border-bottom: none;
    }

    .decrypted-result {
        font-size: 1.5rem;
        line-height: 2;
        white-space: pre-wrap;
        word-break: break-word;
        padding: 2rem;
        background-color: #f1f3f6;
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
    }

    .alert-signature {
        font-size: 1.25rem;
        padding: 1rem;
        text-align: center;
        border-radius: 10px;
    }

    .accordion-button {
        font-weight: bold;
    }

    .code-block {
        font-family: monospace;
        background-color: #f8f8f8;
        padding: 1rem;
        border-radius: 8px;
        overflow-x: auto;
        white-space: pre-wrap;
    }
</style>

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-10">

            <!-- 加密信息头部 -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">🔒 加密详情</h4>
                    <span class="badge bg-light text-dark">{{ encrypted_data.created_at|date:"Y-m-d H:i" }}</span>
                </div>
                <div class="card-body">
                    <p><strong>加密ID:</strong> {{ encrypted_data.id }}</p>
                    <p><strong>创建时间:</strong> {{ encrypted_data.created_at|date:"Y-m-d H:i:s" }}</p>
                    <p><strong>数据哈希:</strong> {{ encrypted_data.data_hash|truncatechars:32 }}</p>
                </div>
            </div>

            <!-- 消息提示 -->
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %} alert-dismissible fade show"
                         role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            {% endif %}

            <!-- 解密结果展示（居中大字） -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">✅ 解密结果</h5>
                </div>
                <div class="card-body text-center">
                    {% if decrypted_data|slice:":11" != "解密失败:" %}
                        <div class="alert alert-success alert-signature small mx-auto mb-4 w-75">
                            数据签名验证成功 ✅
                        </div>
                    {% else %}
                        <div class="alert alert-danger alert-signature small mx-auto mb-4 w-75">
                            数据签名验证失败 ❌<br>{{ decrypted_data }}
                        </div>
                    {% endif %}

                    <pre class="decrypted-result">{{ decrypted_data }}</pre>
                </div>
            </div>

            <!-- 技术详情折叠区 -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0">🔧 技术详情（Base64 编码）</h5>
                </div>
                <div class="card-body">
                    <div class="accordion" id="technicalDetailsAccordion">

                        <!-- 加密AES密钥 -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingAesKey">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapseAesKey" aria-expanded="false"
                                        aria-controls="collapseAesKey">
                                    🔐 加密的AES密钥
                                </button>
                            </h2>
                            <div id="collapseAesKey" class="accordion-collapse collapse"
                                 aria-labelledby="headingAesKey" data-bs-parent="#technicalDetailsAccordion">
                                <div class="accordion-body code-block">
                                    {{ encrypted_data.encrypted_aes_key }}
                                </div>
                            </div>
                        </div>

                        <!-- 加密数据 -->
                        <div class="accordion-item mt-3">
                            <h2 class="accordion-header" id="headingEncryptedData">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapseEncryptedData" aria-expanded="false"
                                        aria-controls="collapseEncryptedData">
                                    📦 加密的数据 (IV + Tag + Data)
                                </button>
                            </h2>
                            <div id="collapseEncryptedData" class="accordion-collapse collapse"
                                 aria-labelledby="headingEncryptedData"
                                 data-bs-parent="#technicalDetailsAccordion">
                                <div class="accordion-body code-block">
                                    {{ encrypted_data.encrypted_data }}
                                </div>
                            </div>
                        </div>

                        <!-- 数字签名 -->
                        <div class="accordion-item mt-3">
                            <h2 class="accordion-header" id="headingSignature">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapseSignature" aria-expanded="false"
                                        aria-controls="collapseSignature">
                                    ✍️ 数字签名
                                </button>
                            </h2>
                            <div id="collapseSignature" class="accordion-collapse collapse"
                                 aria-labelledby="headingSignature"
                                 data-bs-parent="#technicalDetailsAccordion">
                                <div class="accordion-body code-block">
                                    {{ encrypted_data.signature }}
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <!-- 返回按钮 -->
            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <a href="{% url 'encryption_history' %}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> 返回加密记录
                </a>
            </div>

        </div>
    </div>
</div>
{% endblock %}
